<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>简易W3CSchool</title>
</head>

<body id="app">
  <!-- head -->
  <div class="head">
    W3School
  </div>
  <!-- nav部分 -->
  <div class="nav">
    <ul>
      <li>
        <a href="javascript:;">HTML/CSS</a>
      </li>
      <li>
        <a href="javascript:;">JavaScript</a>
      </li>
      <li>
        <a href="javascript:;">Server Side</a>
      </li>
      <li>
        <a href="javascript:;">ASP.NET</a>
      </li>
      <li>
        <a href="javascript:;">XML</a>
      </li>
      <li>
        <a href="javascript:;">WebService</a>
      </li>
      <li>
        <a href="javascript:;">Web</a>
      </li>
    </ul>
  </div>
  <!-- 中部 -->
  <div class="continer">
    <div class="left">
      <ul>
        <li>
          <a href="javascript:;">HTML</a>
        </li>
        <li>
          <a href="javascript:;">XHTML</a>
        </li>
        <li>
          <a href="javascript:;">HTML5</a>
        </li>
        <li>
          <a href="javascript:;">CSS</a>
        </li>
        <li>
          <a href="javascript:;">CSS3</a>
        </li>
        <li>
          <a href="javascript:;">TCP/IP</a>
        </li>
      </ul>
    </div>
    <div class="mainbody">
      <div class="box">
        <div class="font-box">
          <p>HTML系列教程</p>
          <p>从左侧的菜单选择你需要的教程!</p>
        </div>
        <hr>
      </div>
      <div class="box">
        <div class="font-box">
          <p>HTML</p>
          <p>HTML指超文本标签语言。</p>
          <p>HTML是通向Web技术世界的要是。</p>
          <p>在W3School的HTML教程中，您将学习如何使用HTML来创建站点。</p>
          <p>HTML非常容易学习！你会喜欢它的！现在开始学习HTML!</p>
        </div>
        <hr>
      </div>
      <div class="box">
        <div class="font-box">
          <p>HTML5</p>
          <p>HTML5是下一代的HTML。</p>
          <p>HTML5仍处于完善之中，然而，大部分现代浏览器已经具备了某些HTML支持。</p>
          <p>在W3School的HTML教程中，您将了解HTML5的新特性。</p>
          <p>现在就开始学习HTML5!</p>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title-text">参考手册</div>
      <div class="li-box">
        <ul>
          <li>
            <a href="javaScript:;">HTML/HTML5</a>
          </li>
          <li>
            <a href="javaScript:;">标签</a>
          </li>
          <li>
            <a href="javaScript:;">CSS</a>
          </li>
          <li>
            <a href="javaScript:;">1.2.3</a>
          </li>
          <li>
            <a href="javaScript:;">HTML</a>
          </li>
          <li>
            <a href="javaScript:;">颜色</a>
          </li>
          <li>
            <a href="javaScript:;">HTML</a>
          </li>
          <li>
            <a href="javaScript:;">ASCII</a>
          </li>
          <li>
            <a href="javaScript:;">HTML</a>
          </li>
          <li>
            <a href="javaScript:;">Latin-1</a>
          </li>
          <li>
            <a href="javaScript:;">HTML</a>
          </li>
          <li>
            <a href="javaScript:;">符号</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- footer部分 -->
  <div class="footer">
    <div class="font-box">
      当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有@。保留一切权力。
      <div>互联网信息技术服务联盟</div>
    </div>
</body>

</html>